/*
  学习目标：编程式导航的使用
+  场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？
+  编程式导航：通过 JS 代码来实现页面跳转
+  history 是 React 路由提供的，用于获取浏览器历史记录的相关信息。通过props.history获取。
+  push(path)：跳转到某个页面，参数 path 表示要跳转的路径
+  go(n)： 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）

注意：

1. 💥只有被<Route component={组件名}> 设置过路径的组件，props上才有history。
2. 💥`HashRoute` 与`BroswerRoute` 两种模式下都具有history

总结：

1. `history` 属性 是 `React 路由` 提供的，通过`props.history` 获取。
2. `history.push('/路径名')` ：表示跳转到指定的路径。
3. `history.go(n)`  表示前进或后退。参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）
*/
import React from 'react';
import { Route, Link, BrowserRouter as Router, NavLink, Switch, Redirect } from 'react-router-dom';
import './index.css';
export default class App extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <h1>app组件</h1>
                    <Header></Header>
                    <ul>
                        <li>
                            <Link to="/home">首页</Link>
                        </li>
                        <li>
                            <NavLink to="/home" activeClassName="my-active">
                                首页
                            </NavLink>
                        </li>
                        <li>
                            <NavLink to="/my" activeClassName="my-active" exact>
                                我的音乐
                            </NavLink>
                        </li>
                        <li>
                            <NavLink to="/friend" activeClassName="my-active">
                                我的朋友
                            </NavLink>
                        </li>
                    </ul>

                    <Switch>
                        <Redirect from="/" to="/home" exact></Redirect>
                        <Route path="/home" component={Home}></Route>
                        <Route path="/my" component={MyMusic}></Route>
                        <Route path="/friend" component={Friend}></Route>
                    </Switch>
                </div>
            </Router>
        );
    }
}

function Home(props) {
    console.log(49, props);
    const handleClick = () => {
        // 1. 通过props获取history，操作路由跳转
        props.history.go(-1);
    };
    return (
        <h1>
            我是首页组件
            <button onClick={handleClick}>点我调到音乐</button>
        </h1>
    );
}
function Header(props) {
    console.log(62, props);
    // 💥没有设置路由规则的普通组件，props下没有history属性
    return <h1>我是Head而组件，我没有被设置路由</h1>;
}

function Friend(params) {
    return (
        <div>
            <h1>我是Friend</h1>
            <NavLink to="/friend/first">调到第一个朋友</NavLink>
            <br />
            <NavLink to="/friend/second">调到第二朋友</NavLink>
            <br />
            <NavLink to="/friend/third">调到第三个朋友</NavLink>
            <Switch>
                <Route path="/friend" component={FriendHome}></Route>
                <Route path="/friend/first" component={Friend1}></Route>
                <Route path="/friend/second" component={Friend2}></Route>
                <Route path="/friend/third" component={Friend3}></Route>
            </Switch>
        </div>
    );
}

function FriendHome(params) {
    return <h1>朋友首页-父子级重名路由</h1>;
}

function MyMusic(params) {
    return <h1>我是我的音乐件</h1>;
}

function Friend1(params) {
    return <h1>我是第一个朋友</h1>;
}
function Friend2(params) {
    return <h1>第二个朋友</h1>;
}
function Friend3(params) {
    return <h1>第三个朋友</h1>;
}